import { Component } from 'react'
/**
 * 现在
 * 
 * 挂载阶段：
 * 1、constructor
 * 2、static getDerivedStateFromProps(props, state)
 *  - 注意 this 问题
 * 3、render
 * 4、componentDidMount
 * 
 * 更新阶段：
 * 1、父组件更新引起组件更新
 *  -0、static getDerivedStateFromProps(props, state)
 *  -1、shouldComponentUpdate(nextProps, nextState)
 *  -2、render
 *  -3、getSnapshotBeforeUpdate
 *  -4、componentDidUpdate(nextProps, nextState)
 * 2、组件自身更新
 *  -1、shouldComponentUpdate
 *  -2、render
 *  -3、getSnapshotBeforeUpdate
 *  -4、componentDidUpdate
 * 
 * 卸载阶段
 * componentWillUnmount
 */
class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 8
    }
    console.log(1, '初始化');
  }
  // state = {
  //   age: 8
  // }

  // 利用 getDerivedStateFromProps 替代了 componentWillMount 和 componentWillReceiveProps
  static getDerivedStateFromProps(props, state) {
    console.log(2, '组件即将被渲染到DOM', props, state);
    return true;
  }


  componentDidMount() {
    console.log(4, '组件被渲染到DOM了');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(1, '组件更新', nextProps, nextState, this.props, this.state);
    return true; // true 接着向下执行生命周期， false 不执行,不更新视图
  }

  // 组件更新之后，即将重新渲染DOM
  // 替换了componentWillUpdate
  getSnapshotBeforeUpdate() {
    console.log(2, '组件更新，即将重新渲染');
    return true;
  }

  componentDidUpdate(prevProps, prevState, prevInfo) {
    console.log(4, '组件更新完成', prevProps, prevState, this.props, this.state);
  }

  componentWillUnmount() {
    console.log('组件即将被卸载');
  }

  render() {
    console.log(3, '向DOM中渲染');
    let { name, setName } = this.props;
    let { age } = this.state;
    return (
      <div>
        <p>姓名：<input type="text" placeholder="请输入名字" value={name} onChange={
          (e) => { setName(e.target.value) }
        } /></p>
        <div>{name}</div>
        <p>年龄：<input type="text" placeholder="请输入年龄" value={age} onChange={
          (e) => {
            this.setState({
              age: e.target.value
            })
          }
        } /></p>
        <div>{age}</div>
      </div>
    )
  }
}

export default Child;